<script setup lang="ts">
import TinymceEditor from './components/TinymceEditor.vue'
import { ref } from 'vue'

// const content1 = ref(`
// <ol style="list-style-type: upper-alpha;">
//   <li>Apollo</li>
//   <li>Hubble</li>
//   <li>Chandra</li>
//   <li>Cassini-Huygens</li>
//   <li>Spitzer</li>
// </ol>
//   <details id="mce-accordion1" open>
//     <summary>How does it present to an end-user?</summary>
//       <p>By default, when the <code>accordion</code> plugin is loaded, the command is available in the TinyMCE menu at <strong>Insert → Accordion</strong>.</p>
//       <p>Adding <code>accordion</code> to the <code>toolbar</code> in the TinyMCE configuration adds an Accordion icon to the TinyMCE toolbar.</p>
//       <p>And, when a specific collapsible section is selected, a pop-up menu presents offering two controls: one to collapse or expand the selected section; and one to delete the selected section.</p>
//   </details>
//   <details id="mce-accordion2">
//     <summary>11?</summary>
//     <p>222</p>
//   </details>
//   <a id="start">aaa</a>123
//   `)
const content = ref('')
</script>

<template>
  <button>默认tinymce</button>
  <div v-html="content"></div>
  <TinymceEditor v-model="content" />
</template>

<style scoped></style>
